<!DOCTYPE HTML>
<html>
	<head>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
		<link rel="stylesheet" type="text/css" href="css/reset.css">
	</head>
		<style type="text/css">
		* { 
		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
		-moz-box-sizing: border-box;    /* Firefox, other Gecko */
		box-sizing: border-box;         /* Opera/IE 8+ */
		}

		#wrapper {
		 	width: 720px;
		 	margin: 0 auto;
			background-color: #EEEEEE;
		}
		.table {
				width: 200px;
				height: 200px;
				background-color: #FED847;
				margin: 25px 20px;
		  	float: left;
		}
		.table p {
		  font-size: 20px;
			font-weight: bold;
			line-height: 20px;
			text-align: center;
		}
		#queue {
		  width: 300px;
			height: 250px;
			background-color: #388FFE;
			margin: 20px;
		  float: left;
		}
		#queue p{
		  font-size: 20px;
			font-weight: bolder;
			line-height: 20px;
			text-align: center;
		}
		#notCheck {
		  width: 340px;
			height: 250px;
			background-color: #72FE52;
			margin: 20px;
			float: right;
		}
		#notCheck p {
		  font-size: 20px;
			font-weight: bolder;
			line-height: 20px;
			text-align: center;
		}
		.item {
		  display: inline-block;
			background-color: #EE772C;
			width: 100%;
			font-size: 18px;
			line-height: 20px;
			margin: 2px 0px 2px 0px;
			padding: 4px;
			border-radius: 4px 4px 4px 4px / 4px 4px 4px 4px;
		}
		.item button{
		}
			.clearfix:after {
			   content: ".";
			   display: block;
			   clear: both;
			   visibility: hidden;
			   line-height: 0;
			   height: 0;
			}
			 
			.clearfix {
			   display: inline-block;
			}
			 
			html[xmlns] .clearfix {
			   display: block;
			}
			 
			* html .clearfix {
			   height: 1%;
			   overflow: visible;
			}

			.test span {
				text-align: justify;
			}
		</style>
	<body>
		<div id="wrapper">
		<div class="clearfix" id="top">
			<div class="table" id="table1">
				<p style="margin-top:-20px">Two-seater</p>
				<span class="item">X先生 X人<button>刪除</button></span>
				<span class="item" style="background-color:#EE271D;">X先生 X人<button>刪除</button></span>
			</div>
			<div class="table" id="table2">
				<p style="margin-top:-20px">Four-seater</p>
			</div>
			<div class="table " id="table3">
				<p style="margin-top:-20px">Eight-seater</p>
			</div>
		</div>
		<div class="clearfix" id="down">
			<div id="queue">
				<p style="margin-top:-20px">Queue</p>
        <span class="item" style="background-color:#D074EE;">Z先生 X人 <button>通知到店</button></span>
			</div>
			<div id="notCheck">
				<p style="margin-top:-20px">NotCheck</p>
        <span class="item">Y先生 X人<button>刪除</button><button>到店</button></span>
			</div>
		</div>
	</div>
	</body>
</html>